/**
 * @parma author ludan
 * @param explain 网盘树形组件
 */
import React from 'react'
import { Tree } from 'antd';
import type { DataNode, DirectoryTreeProps } from 'antd/es/tree';

export interface baseProps {
  [key: string]: string
}

export interface baseState {
  [key: string]: string
}

const { DirectoryTree } = Tree;
const treeData: DataNode[] = [
  {
    title: "前端视频目录整理",
    key: "0",
    children: [
      {
        title: 'React',
        key: '0-0',
        children: [
          { title: 'React17', key: '0-0-0', isLeaf: true },
          { title: 'React16-Typescript', key: '0-0-1', isLeaf: true },
        ],
      },
      {
        title: 'Vue',
        key: '0-1',
        children: [
          { title: 'Vue2', key: '0-1-0', isLeaf: true },
          { title: 'Vue3-Typescript', key: '0-1-1', isLeaf: true },
        ],
      },
      {
        title: 'Jquery',
        key: '0-2',
        children: [
          { title: '原生js + Jquery', key: '0-2-0', isLeaf: true }
        ],
      },
      {
        title: 'Typescript',
        key: '0-3',
        children: [
          { title: 'Typescript 基础入门', key: '0-3-0', isLeaf: true }
        ],
      },
    ]
  }
];
class NetworkTree extends React.Component<baseProps, baseState> {
  constructor(props: baseProps) {
    super(props);
    this.state = {}
  }

  onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {
    console.log('Trigger Select', keys, info);
  };

  onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
    console.log('Trigger Expand', keys, info);
  };

  render(): React.ReactNode {
    return (
      <div>
        <DirectoryTree
          multiple
          defaultExpandAll
          onSelect={this.onSelect}
          onExpand={this.onExpand}
          treeData={treeData}
        />
      </div>
    )
  }
}

export default NetworkTree